<template>
	<view>
		<view class="box">
			<view class="left">
				头像
			</view>
			<view class="">
				
			</view>
		</view>
		<view class="box">
			<view class="left">
				姓名
			</view>
			<view class="input">
				<input type="text" value="" placeholder="请输入姓名"/>
			</view>
		</view>
		<view class="box">
			<view class="left">
				性别
			</view>
			<view class="sex" @click="selectsex">
				<view class="">
					{{sex}}
				</view>
				<view class="image">
					<image src="../../static/xiyoujiantou.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="box">
			<view class="left">
				手机号码
			</view>
			<view class="input">
				<input type="number" value="" placeholder="请输入手机号码"/>
			</view>
		</view>
		<view class="box">
			<view class="left">
				身份证号
			</view>
			<view class="input">
				<input type="text" value="" placeholder="请输入身份证号码"/>
			</view>
		</view>
		<view class="box">
			<view class="left">
				服务项目
			</view>
			<view class="">
				
			</view>
		</view>
		<view class="box">
			<view class="left">
				排班安排
			</view>
			<view class="">
				
			</view>
		</view>
		<view class="box">
			<view class="left">
				标准工资
			</view>
			<view class="">
				
			</view>
		</view>
		<view class="box">
			<view class="left">
				考勤标准
			</view>
			<view class="">
				
			</view>
		</view>
		
		<view class="textarea">
			 <textarea value="" placeholder="个人简介" />
		</view>
		
		<view class="button">
			新增
		</view>
		<view style="width: 100%;height: 120rpx;">
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sex:'男',//性别
			}
		},
		methods: {
			//男女选择
			selectsex(){
				var that = this
				uni.showActionSheet({
				    itemList: ['男', '女'],
				    success: function (res) {
				        console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
						if((res.tapIndex + 1) == 1){
							that.sex = '男'
						}else{
							that.sex = '女'
						}
				    },
				    fail: function (res) {
				        console.log(res.errMsg);
				    }
				});
			},
		}
	}
</script>

<style lang="scss">
	image{
		width: 100%;
		height: 100%;
	}
	.box {
		padding: 20rpx;
		border-bottom: 1rpx solid #ECECEC;
		display: flex;
		align-items: center; 
		.left{
			flex: 0 0 20%;
		}
		.sex{
			flex: 0 0 80%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.image{
				width: 30rpx;
				height: 30rpx;
			}
		}
		
	}
	.textarea{
		padding: 10rpx;
		border: 1rpx solid #ECECEC;
		margin: 20rpx;
		border-radius: 10rpx;
	}
	.button{
		width: 80%;
		height: 80rpx;
		position: fixed;
		bottom: 20rpx;
		left: 50%;
		margin-left: -40%;
		background-color: #eb673f;
		border-radius: 10rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 80rpx;
	}
</style>
